/**
 * 文件的入口文件：
 * 固定写法：一个模块
 */
import TodoList from './TodoList/index'

;((doc) => {
  //1.获取dom，元素的获取
  const oInput: HTMLInputElement = doc.querySelector('input')
  const oAddBtn: HTMLElement = doc.querySelector('.add-btn')
  const oTodoList: HTMLElement = doc.querySelector('.todo-list')

  // 创建实例对象
  const todoList = TodoList.createInstance(oTodoList)

  //2.定义入口文件执行函数
  const init = (): void => {
    //3.执行绑定事件处理函数
    bindEvent()
  }
  //具体时间处理函数：
  function bindEvent():void {
    //事件监听
    oAddBtn.addEventListener('click', handlerAddBtnClick, false)
    oTodoList.addEventListener('click', handlerListClick, false)
  }
  //具体事件处理函数：
  //增加的事件处理：调用类的增加组件方法
  function handlerAddBtnClick() {
    const val: string = oInput.value.trim()
    if(!val) {
      return
    }
    todoList.addItem({
      id: new Date().getTime(),
      content: val,
      completed: false
    })
    oInput.value = ''
  }
  //list item的事件处理：
  //判断事件源类型，根据事件源类型出发类的方法
  function handlerListClick(e: MouseEvent) {
    const tar = e.target as HTMLElement
    const tagName = tar.tagName.toLocaleLowerCase()
    if(tagName === 'input' || tagName === 'button') {
      const id: number = parseInt(tar.dataset.id)
      switch(tagName) {
        case 'button':
          todoList.removeItem(id)
          break
        case 'input':
          todoList.toggleCompleted(id)
          break
        default:
          break
      }
    }
  }

  //4.入口文件执行
  init()
})(document);